<template>
  <div class="obtain_list_item">
    <div class="obtain_list_item_img">
      <el-image
        fit="cover"
        :src="itemData.shipin ? itemData.shipin.thumb : itemData.zhaopian"
        :lazy="true"
      />
      <img
        @click="seeVideo(itemData.shipin.path)"
        v-if="itemData.shipin != ''"
        class="play_img"
        src="../assets/home/13.png"
        alt=""
      />
    </div>
    <div class="obtain_list_item_text">
      <div class="obtain_item_name">{{ itemData.xueyuanxingming }}</div>
      <div class="obtain_item_gen">
        <div class="obtain_item_gen_1">
          专业：{{ itemData.freeprofessionalmanagement_zhuanyemingcheng }}
        </div>
        <div class="obtain_item_gen_1">
          毕业时间：{{ itemData.biyeshijian }}
        </div>
      </div>
      <div class="obtain_item_gen">
        <div class="obtain_item_gen_1">
          就业岗位：{{ itemData.jiuyegangwei }}
        </div>
        <div class="obtain_item_gen_1">就业薪资：{{ itemData.jiuyexinzi }}</div>
      </div>
    </div>
  </div>
  <viewVideo :url="videoUrl" ref="videoText"></viewVideo>
</template>
    

<script name="outstandingGraduates" setup>
import { ref, reactive, inject } from "vue";
import viewVideo from "@/components/viewVideo.vue";
const injectMessage = inject("$message");
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
let itemData = props.item;

// 观看视频
let videoText = ref(null);
let videoUrl = ref("");
function seeVideo(url) {
  if (!url) {
    injectMessage.error("视频出错了，稍后再试");
    return;
  }
  videoUrl.value = url;
  videoText.value.openVideo();
}
</script>

<style lang="scss" scoped>
.obtain_list_item {
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
  width: 168px;
  height: 160px;
  background: #fff;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  .obtain_list_item_img {
    position: relative;
    width: 100%;
    height: 96px;
    img {
      width: 100%;
      height: 100%;
    }
    .play_img {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 30px !important;
      height: 30px !important;
    }
  }
  .obtain_list_item_text {
    padding: 0 8px;
    .obtain_item_name {
      padding: 8px 0 3px;
      color: #1f52ae;
      font-size: 10px;
      font-weight: 500;
    }
    .obtain_item_gen {
      margin-top: 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .obtain_item_gen_1 {
        width: 50%;
        color: #79848f;
        font-size: 7px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
      }
    }
    .obtain_item_comment {
      margin-top: 3px;
      color: #79848f;
      font-size: 7px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
    }
  }
}
.obtain_list_item:nth-child(4n + 4) {
  margin-right: 0;
}
</style>